/**
 * @description: 全局加载动画:实现方案为在页面上添加一个全局的 loading 元素，
 *               通过控制该元素的显示和隐藏来实现加载动画的效果。
 */
const LOADING_ELEMENT_ID = 'loading';
let count = 0; // 保证全局唯一loading

/**
 * 获取 loading 元素
 */
const getLoadingElement = (): HTMLElement | null => {
    return document.getElementById(LOADING_ELEMENT_ID);
};

/**
 * 显示加载动画
 *
 * 如果尚未显示加载动画，则将其显示出来，并增加加载动画的显示计数。
 */
export const showLoading = (): void => {
    if (count === 0) {
        const loading = getLoadingElement();
        if (loading && loading.style.display !== 'flex') {
            // react18版本以及后：使用setProperty兼容现代前端的样式隔离和优先级机制，确保 loading 动画能正确显示。
            loading.style.setProperty('display', 'flex', 'important');
        }
    }
    // 防止 count 溢出
    if (count < Number.MAX_SAFE_INTEGER) {
        count++;
    }
};

/**
 * 隐藏加载动画。
 *
 * 当调用此函数时，会将全局计数器 count 减一。
 * 如果 count 小于等于 0，则隐藏页面上的加载提示。
 */
export const hideLoading = (): void => {
    if (count > 0) {
        count--;
    }
    if (count <= 0) {
        count = 0;
        const loading = getLoadingElement();
        if (loading && loading.style.display !== 'none') {
            // react18版本以及后：使用setProperty兼容现代前端的样式隔离和优先级机制，确保 loading 动画能正确显示。
            loading.style.setProperty('display', 'none', 'important');
        }
    }
};

/**
 * 显示或隐藏全局loading
 */
export const handleLoading = (show?: boolean): void => {
    return show ? showLoading() : hideLoading();
};
